import {mapGetters} from 'vuex';

const collwidth = 1600;

const collapsed ={
    state: {
        collapsed: false
    },
    getters: {
        collapsed(state){
            return state.collapsed;
        }
    },
    mutations: {
        setCollapsed(state, collapsed) {
            state.collapsed = collapsed;
        }
    },
    actions:{
        changeCollapsed({commit}, collapsed){
            commit('setCollapsed', collapsed);
        }
    }
};

const Utils = {
    collapsedGetters() {
        return mapGetters(['collapsed'])
    },
};

let Plugin = {
    install(Vue, store) {
        store.registerModule('collapsed', collapsed);
        if (window.innerWidth <= collwidth) {
            store.dispatch('changeCollapsed', true);
        }
        window.onresize = function(){
            if (window.innerWidth <= collwidth) {
                store.dispatch('changeCollapsed', true);
            } else {
                store.dispatch('changeCollapsed', false);
            }
        };
        Vue.mixin({
            computed: {
                ...Utils.collapsedGetters()
            }
        });
    }
}

export default Plugin;